{% load static %}
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="{% static 'plugins/bootstrap-3.4.1/css/bootstrap.min.css' %}">
    <link rel="stylesheet" href="{% static 'plugins/font-awesome-4.7.0/css/font-awesome.min.css' %}">
    <style>
        h1 {
            color: red;
            text-align: center;
        }
    </style>
</head>
<body>
<h1>hello world {{ name }}</h1>
<a href="/login/">跳转</a>
<form action="",method="get">
<div>
 <div class="input-group" style='width: 200px;height:auto'>
                <input type="text" name='q' class="form-control" placeholder="Search for..." value={{search_data}}>
                <span class="input-group-btn">
                  <button class="btn btn-default" type="submit">
                    <span class="glyphicon glyphicon-search" aria-hidden="true"></span>
                  </button>
                </span>
            </div>
</div>
</form>
<div style="width: 600px;height: 400px">
<table class="table table-striped">
      <thead>
        <tr>
          <th>Name</th>
          <th>ID</th>
          <th>Price</th>
          <th>Img </th>
        </tr>
      </thead>
    <tbody>
    <tr>
        {% for good in queryset %}
            <th>
                <a href="/goods/?gid={{ good.id }}" style="text-decoration: none">{{ good.food }}</a>
            </th>
            <th>{{ good.id }}</th>
            <th>{{ good.price }}</th>
            <th>{{ good.numbe }}</th>
            <th><img src="{{ good.img }}" alt="" style="width: auto;height: auto"></th>
            </tr>
        {% endfor %}
    </tbody>
</table>
               <nav aria-label="Page navigation">
                    <ul class="pagination">
                        {{ page_string }}
                    </ul>
                </nav>

</div>
<script src="{% static 'js/jquery-3.6.0.min.js' %}"></script>
<script src="{% static 'plugins/bootstrap-3.4.1/js/bootstrap.min.js' %}"></script>
</body>
</html>